<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.7.1.js"></script>
    <link href="css/login.css" rel="stylesheet">
</head>

<body>
    <div class="logindiv">
        <h2 class="title">
            <span>密码登录</span>&nbsp;|
            <span>验证码登录</span>
        </h2>
        <div class="style">
            <div class="style1">
                <form action="" method="post" name="form">
                    <div><span>账号：</span><input type="text" id="userid" placeholder="请输入手机号"></div><br>
                    <div><span>密码：</span><input type="password" placeholder="请输入密码" id="userpwd"></div><br>
                    <!-- <div><span>昵称：</span><input type="text" id="name" placeholder="请输入昵称"></div><br> -->
                    <!-- <span>头像：</span><input type="submit" value="选择文件" class="img"><br> -->
                    <div><button onclick="checkLogin()">登录</button></div>
                    <span id="msg"></span>
                </form>
            </div>
            <div class="style1">
                <form action="" method="post" name="form">
                    <div><span>账号2：</span><input type="text" id="userid" placeholder="请输入手机号"></div><br>
                    <div><span>密码2：</span><input type="password" placeholder="验证码" id="userpwd"></div><br>
                    <!-- <div><span>昵称：</span><input type="text" id="name" placeholder="请输入昵称"></div><br> -->
                    <!-- <span>头像：</span><input type="submit" value="选择文件" class="img"><br> -->
                    <div><button onclick="checkLogin()">登录</button></div>
                    <span id="msg"></span>
                </form>
            </div>
        </div>

    </div>
    <script>
        function checkLogin() {
            event.preventDefault(); //阻止表单提交默认行为
            //用户输入的账号和密码获取到
            var userid = $("#userid").val();
            var userpwd = $("#userpwd").val();
            //创建json数据 次数据就是向服务器提交的数据
            var obj = {
                "userid": userid,
                "userpwd": userpwd
            }
            //访问后端接口
            $.ajax({
                url: "http://localhost:8080/demo/LoginServlet",
                method: "post",
                dataType: "json",
                data: JSON.stringify(obj), //obj是一个json对象,通过JSON.stringify()把他转成字符串，向服务器发送的数据
                success: function (res) {
                    if (res.code == 200) {
                        //本地存储
                        window.localStorage.setItem("user",JSON.stringify(res.data) )
                        window.location.href = "news.html";
                    } else {
                        $("#msg").html(res.msg);
                        // alert(res.msg);
                    }
                }
            })
        }
        var h2=document.querySelectorAll(".title span");
        var style=document.querySelectorAll(".style1");
        for(let a=0;a<h2.length;a++){
            h2[a].onclick=function(){
                for(let b=0;b<style.length;b++){
                    if(h2[b]==this){
                        style[b].style.display="block";
                        h2[b].classList.add("spancur");
                    }else{
                        style[b].style.display="none";
                        h2[b].classList.remove("spancur");
                    }
                }
            }
        }
    </script>
</body>

</html>